<template>
  <div id="FileTree" @contextmenu="contextMenu">
    <v-toolbar dense elevation="0" height="30" style="flex-grow: 0">
      <v-spacer></v-spacer>
      <v-btn icon small plain @click="openDir">
        <v-icon>mdi-folder-open</v-icon>
      </v-btn>
      <v-btn icon small plain @click="save">
        <v-icon>mdi-content-save</v-icon>
      </v-btn>
      <!-- <v-btn icon small plain>
              <v-icon>mdi-magnify</v-icon>
            </v-btn>
            <v-btn icon small plain>
              <v-icon>mdi-clipboard-edit-outline</v-icon>
            </v-btn> -->

      <!-- 功能：能够缩小目录, 进入到当前目录下面 -->
      <!-- 功能：展开面板 -->
      <!-- 功能：搜索文件 -->
    </v-toolbar>
    <div class="view" >
      <v-treeview
        v-model="tree"
        :open="initiallyOpen"
        :items="items"
        activatable
        dense
        hoverable
        item-key="filepath"
        item-text="name"
        open-on-click
        class="view"
        return-object
        color="#88a6bd"
        @update:active="fileSelected"
        @update:open="dirSelected"
      >
        <template v-slot:prepend="{ item, open }">
          <v-icon small v-if="!item.file" :color="colors['dir']">
            {{ open ? "mdi-folder-open-outline" : "mdi-folder-outline" }}
          </v-icon>
          <v-icon small v-else :color="colors[item.file]">
            {{ files[item.file] || files["txt"] }}
          </v-icon>
        </template>
      </v-treeview>
      <div class="nofile-opt" v-if="items.length == 0">
        <br />
        <h6>请打开一个本地文件夹</h6>
        <br />
        <v-btn small depressed tile dark color="#afbeca" @click="openDir">
          打开文件夹
        </v-btn>
      </div>
    </div>
    <!-- 自定义菜单 -->
    <div id="contextMenu" v-show="showContextMenu">
      <div v-for="(item, k) in menus" :key="k" >
        <div @mousedown="contextMethods(item.callback)">
        {{item.name}}
        </div> 
      </div>
    </div>
  </div>
</template>

<script>
import * as Note from "@/foreground/note/note";

export default {
  data: () => ({
    initiallyOpen: ["public"],
    files: {
      dir: "mdi-archive-outline",
      html: "mdi-language-html5",
      js: "mdi-nodejs",
      json: "mdi-code-json",
      md: "mdi-language-markdown",
      pdf: "mdi-file-pdf",
      png: "mdi-file-image",
      txt: "mdi-file-document-outline",
      xls: "mdi-file-excel",
    },
    colors: {
      dir: "blue-gray",
      html: "amber",
      js: "orange",
      md: "black ",
      pdf: "pink",
      png: "red",
      txt: "blue-gray",
      xls: "green",
    },
    tree: [],
    items: [],
    showContextMenu: false,
    menus: [
      {name: "新建文件", callback: "newfile"},
      {name: "新建文件夹", callback: "newfolder" },
      {name: "删除", callback: "delete" },
    ], // 右键菜单
  }),
  methods: {
    fileSelected(item) {
      console.log(item);
      if (item.length && item[0] != "") {
        this.$emit("fileSelected", item); // 让 write 窗口知道文件被选中
      }
    },
    dirSelected(item) {
      console.log(item);
    },
    // 工具栏方法
    openDir() {
      // 打开本地文件夹目录
      const _self = this;
      Note.openDir().then((dirtree) => {
        _self.items = dirtree.children;
        _self.$emit("reopen");
      });
    },
    save() {
      this.$emit("saveFile");
    },

    contextMenu(event) {
      let _self = this
      if(_self.items.length == 0) return
      let menu = document.getElementById("contextMenu")
      menu.style.left = event.clientX + "px"
      menu.style.top = event.clientY + "px"
      _self.showContextMenu = true
    },
    // 全局点击操作等操作后，将会取消这里
    // 该方法将打开一个菜单，将会将相关事件影响全局，因此可以考虑独立出作为一个全局的组件使用。
    registryCancel() {
      let _self = this
      document.body.onmousedown = ()=>{
        if(_self.showContextMenu) {
          _self.showContextMenu = false
        }
      }
    },
    // 调用对应的上下文菜单方法
    contextMethods(method) {
      switch (method) {
        case "newfile":
          this.newFile()
          break;
        case "newfolder":
          this.newFolder()
          break;
        case "delete":
          this.delete()
          break;
        default:
          break;
      }
    },
    // 新建文件
    newFile() {
      console.log("newfile")
      return true
    },
    // 新建文件夹
    newFolder() {
      console.log("newfolder")
      return true
    },
    // 删除
    delete() {
      console.log("delete")
      return true
    }
  },
  mounted() {
    this.registryCancel()
  }
};
</script>

<style lang="scss" scoped>
#FileTree {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fafafa;
  
  #contextMenu {
    position:absolute;
    top: 0;
    left: 0;
    padding:10px 0; 
    width: 200px;
    background: #ffff;
    box-shadow:1px 1px 4px #ddd;
    text-indent: 1em;
    z-index: 9999;
    >div {
      font-size: 14px;
      height:30px;
      line-height: 34px;
      cursor: pointer;
    }
    >div:hover{
      background:#afbeca;
      color:#fff;
    }
  }
}
#FileTree > .view {
  width: 200px;
  flex:1;
  font-size: 14px;
  overflow: hidden;
}
#FileTree:hover > .view {
  overflow: overlay; // 用 overlay 来保持滚动条位置
}
.nofile-opt {
  padding: 15px;
  text-align: center;
  color: #aaa;
}
</style>
